<template>
  <div>
    <h1>FGPhoneForm 移动端表单渲染</h1>
    <div class="text1">
      用于展示、填报由表单编辑器生成的表单，表单样式基于
      <VLink />
    </div>

    <div class="coms-form-phone">
      <el-card header="代码" class="coms-form-phone-left">
        <Code :code="phoneFormCode" />
      </el-card>
      <el-card header="演示" class="coms-form-phone-right phone-scroll">
        <FGPhoneForm ref="FGPhoneForm" v-model="form" />
        <div style="margin: 16px">
          <van-button round block type="info" @click="submitForm">提交</van-button>
          <van-button round plain block style="margin-top: 15px" type="info" @click="resetForm">重置</van-button>
        </div>
      </el-card>
    </div>
    <el-card header="Attributes">
      <Attributes :data="formAttributes" />
    </el-card>
    <el-card header="Methods">
      <Methods :data="formMethods" />
    </el-card>
  </div>
</template>

<script>
import { formAttributes, formMethods, phoneFormCode } from "@/utils/comsData";
import { data } from "@/utils/defaultValue";
import Attributes from "./components/Attributes";
import Methods from "./components/Methods";
import FGPhoneForm from "@/package/FGPhoneForm";
import Code from "./components/Code.vue";

export default {
  components: { Attributes, Methods, FGPhoneForm, Code },
  data() {
    return {
      formAttributes,
      formMethods,
      phoneFormCode,
      form: JSON.stringify(this.$store.state.app.formData || data)
    };
  },
  methods: {
    submitForm() {
      this.$refs["FGPhoneForm"].validateForm((valid, form) => {
        if (valid) {
          // 表单校验通过
        } else {
          console.log("表单校验失败");
        }
      });
    },
    resetForm() {
      this.$refs["FGPhoneForm"].resetForm();
    }
  }
};
</script>

<style lang="scss" scoped>
.coms-form-phone {
  width: 100%;
  position: relative;
  .coms-form-phone-left {
    width: calc(100% - 395px);
  }
  .coms-form-phone-right {
    position: absolute;
    right: 0;
    top: -20px;
    bottom: 0;
  }
}
/* 隐藏滚动条 */
::-webkit-scrollbar {
  display: none;
}

/* 启用滚动 */
.phone-scroll {
  overflow: auto;
  width: 375px;
}
</style>
